<template>
	<view class="content">
		<view>
			犬只名字
			<text class="huang">※</text>
		</view>
		<input type="text" v-model="name" placeholder="请输入犬只名字" />
		<view>
			身份证号（法人身份证号）
			<text class="huang">※</text>
		</view>
		<input type="text" v-model="idCard" placeholder="请输入身份证号" />
		<view @tap="go" class="btn"><button type="default" style="background-color:#fcd700;">查询</button></view>


		<view class="tip" v-if="Data">
			<text class="guanbi" @click="Data = null">x</text>
			<view>
				<text class="text">犬主姓名:</text>
				{{ Data.name }}
			</view>
			<view>
				<text class="text">是否符合年检条件:</text>
				{{ Data.isFuHe }}
			</view>
			<view v-show="Data.isFuHe == '不符合'">
				<text class="text">原因:</text>
				您的犬只有处罚尚未处理，请前往个人中心查看并尽快处理
			</view>
			<button v-show="Data.isFuHe == '符合'" @tap="gonianjian" type="primary" style="background-color:#fcd700;padding: 0 60upx;">前往年检</button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import CHONG from '../../static/js/function.js';
	import IdCard from '../../static/js/IdCard.js';
	export default {
		data() {
			return {
				name: '', //犬只名称 母 小狗狗
				idCard: '',
				Data: null,
			};
		},
		computed: mapState(['URL', 'TOKEN', 'UPDATE']),
		methods: {
			go() {
				if (!this.name) {
					CHONG.tip('请填写养犬人姓名', 1);
					return;
				} else if (IdCard.cnid(this.idCard) !== true) {
					CHONG.tip('身份证号格式错误', 1);
					return;
				}
				CHONG.tip('查询中', 0);
				let data = {
					name: this.name,
					idCard: this.idCard
					// "name": "养犬人姓名",
					// "idCard": "身份证号"
				};

				uni.request({
					url: this.URL + 'nianjian',
					data: data,
					success: res => {
						console.log(res.data);
						let json = res.data;
						if (json.name) {
							this.Data = json;
							uni.hideLoading();

						} else {
							CHONG.tip(json.msg);
						}

					},
					fail: res => {
						console.log(res);
					}
				});
			},
			gonianjian() {
				uni.showLoading({
					title: "加载中"
				})
				uni.request({
					url: this.URL + 'njcs',
					data: {
						name: this.name,
						idCard: this.idCard
					},
					success: res => {
						console.log(res.data);
						let json = res.data;

						json = JSON.stringify(json);

						try {
							uni.setStorageSync('nianjianData', json);
							console.log("存上了")
							uni.navigateTo({
								url: './apply',
								success: () => {
									this.Data = null;
									uni.hideLoading();
								}
							});
						} catch (e) {
							console.log("没存上了")
							// error
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.content {
		font-size: 26upx;
		padding: 20upx;

		input {
			color: $chong-text-color;
			font-size: 24upx;
			margin: 10upx 0;
			padding: 4upx 20upx;

			border: {
				radius: 10upx;
				style: solid;
				width: 1upx;
				color: rgba($chong-text-color, 0.2);
			}

			background: white;
		}

		.btn {
			padding: 50upx 0;
			margin: 0 140upx;
		}

		.huang {
			color: $chong-iconbg-color;
		}

		.tip {
			padding: 0 20upx;
			box-sizing: border-box;
			width: 690upx;
			height: 500upx;
			position: relative;
			top: -200upx;
			background: white;
			text-align: center;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			margin: 20upx;
			box-shadow: 0px 6px 5px 0px #d1d1d1;
			font-size: 36upx;
			border-radius: 20upx;

			.text {
				color: #888;
				padding-right: 10upx;
			}

			.guanbi {
				background-color: #fcd700;
				width: 50upx;
				height: 50upx;
				border-radius: 50%;
				position: absolute;
				top: 30upx;
				right: 50upx;
				color: #fff;
				font-size: 40upx;
				line-height: 40upx;
			}
		}
	}
</style>
